<!doctype html>
<!--
  -- Copyright 2014 The Chromium Authors. All rights reserved.
  -- Use of this source code is governed by a BSD-style license that can be
  -- found in the LICENSE file.
  -->
<html lang="en-us">
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
  <title>Memory Inspector</title>
  <link href="https://fonts.googleapis.com/css?family=Coda" rel="stylesheet" type="text/css">
  <link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/flick/jquery-ui.css" rel="stylesheet">
  <link href="/css/mmap.css" rel="stylesheet" type="text/css">
  <link href="/css/nheap.css" rel="stylesheet" type="text/css">
  <link href="/css/processes.css" rel="stylesheet" type="text/css">
  <link href="/css/profiler.css" rel="stylesheet" type="text/css">
  <link href="/css/rootUi.css" rel="stylesheet" type="text/css">
  <link href="/css/settings.css" rel="stylesheet" type="text/css">
  <link href="/css/storage.css" rel="stylesheet" type="text/css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
  <script src="https://www.google.com/jsapi"></script>
  <script type="text/javascript">
    google.load('visualization', '1',
                { packages: ['corechart', 'table', 'orgchart', 'treemap'] });
  </script>
  <script src="/js/devices.js"></script>
  <script src="/js/mmap.js"></script>
  <script src="/js/nheap.js"></script>
  <script src="/js/processes.js"></script>
  <script src="/js/profiler.js"></script>
  <script src="/js/rootUi.js"></script>
  <script src="/js/settings.js"></script>
  <script src="/js/storage.js"></script>
  <script src="/js/timers.js"></script>
  <script src="/js/webservice.js"></script>
</head>
<body>
  <div id="wrapper">
    <h1>Memory Inspector</h1>
    <div id="tabs">
      <ul>
        <li><a href="#tabs-ps">Processes</a></li>
        <li><a href="#tabs-prof">Profiler</a></li>
        <li><a href="#tabs-mm">Memory maps table</a></li>
        <li><a href="#tabs-nheap">Native S.Traces</a></li>
        <li><a href="#tabs-storage">Archived traces</a></li>
        <li><a href="#tabs-settings">Settings</a></li>
      </ul>

      <div id="tabs-ps">
        <div>
          Device:
          <select id="devices"></select>
          <input type="button" id="refresh-devices" value="&#10226;">
        </div>
        <div id="device_tabs">
          <ul>
            <li><a href="#device_tabs-osstats">Device stats</a></li>
            <li><a href="#device_tabs-procstats">Selected process stats</a></li>
          </ul>
          <div id="device_tabs-osstats">
            <div id="os-mem_chart"></div>
            <div id="os-cpu_chart"></div>
          </div>
          <div id="device_tabs-procstats">
            <div id="proc-cpu_chart"></div>
            <div id="proc-mem_chart"></div>
          </div>
        </div>

        <div id="ps-table-wrapper">
          <div id="ps-toolbar" class="ui-widget-header ui-corner-all">
            <button id="ps-quick_snapshot">Quick snapshot</button>
            <button id="ps-dump_mmaps">Dump mmaps</button>
            <button id="ps-full_profile">Full profile</button>
            <input type="checkbox" id="ps-show_all">
            <label for="ps-show_all">Show all processes</label>
          </div>
          <div id="ps-table"></div>
        </div>

        <div id="ps-tracer-dialog" title="Trace process">
          <div>
            <label for="ps-tracer-process">Process</label>
            <input type="text" id="ps-tracer-process" readonly class="text ui-widget-content">
          </div>
          <div>
            <label for="ps-tracer-period">Period [s.]</label>
            <input type="text" id="ps-tracer-period" value="10">
          </div>
          <div>
            <label for="ps-tracer-snapshots">Num snapshots</label>
            <input type="text" id="ps-tracer-snapshots" value="1">
          </div>
          <div>
            <input type="checkbox" id="ps-tracer-bt" class="ui-widget-content">
            <label for="ps-tracer-bt">Detailed (w/ backtraces)</label>
          </div>
        </div>
      </div>

      <div id="tabs-prof">
        <header id="prof-options">
          <span>
            Metric:
            <select id="prof-metric"></select>
          </span>
          <span>
            Snapshot:
            <div id="prof-time"></div>
            T = <span id="prof-time_label">0</span> s.
          </span>
          <span>
            Rules:
            <label id="prof-ruleset"></label>
          </span>
        </header>
        <div id="prof-tree_chart"></div>
        <div id="prof-time_chart"></div>
      </div>

      <div id="tabs-mm">
        <header>
          <table id="mm-tools">
            <tr>
              <th colspan="3">
                Data filters
                <input type="button" id="mm-filter-clear" value="&#10226;">
              </th>
            </tr>
            <tr>
              <th>Filter</th>
              <td>Prot: <input type="text" id="mm-filter-prot"></td>
              <td>File: <input type="text" id="mm-filter-file"></td>
            </tr>
            <tr>
              <th>Lookup</th>
              <td>Addr: <input type="text" id="mm-lookup-addr"></td>
              <td>Offset: <input type="text" id="mm-lookup-offset" readonly=""></td>
            </tr>
          </table>
          <table id="mm-stats">
            <tr>
              <th>Totals</th>
              <th>Priv Dirty [KB]</th>
              <th>Priv Clean [KB]</th>
              <th>Shared Dirty [KB]</th>
              <th>Shared Clean [KB]</th>
            </tr>
            <tr>
              <th>Shown</th>
              <td><span id="mm-totals-priv-dirty">0</span></td>
              <td><span id="mm-totals-priv-clean">0</span></td>
              <td><span id="mm-totals-shared-dirty">0</span></td>
              <td><span id="mm-totals-shared-clean">0</span></td>
            </tr>
            <tr>
              <th>Selected</th>
              <td><span id="mm-selected-priv-dirty">0</span></td>
              <td><span id="mm-selected-priv-clean">0</span></td>
              <td><span id="mm-selected-shared-dirty">0</span></td>
              <td><span id="mm-selected-shared-clean">0</span></td>
            </tr>
          </table>
        </header>
        <div id="mm-table"></div>
      </div>

      <div id="tabs-nheap">
        <div id="nheap-toolbar" class="ui-widget-header ui-corner-all">
          <label>Total (allocated): </label>
          <input type="text" id="nheap-total-allocated" values="0 KB" readonly>
          <label>Total (resident): </label>
          <input type="text" id="nheap-total-resident" values="0 KB" readonly>
          <label>Selected (allocated): </label>
          <input type="text" id="nheap-selected-allocated" values="0 KB" readonly>
          <label>Selected (resident): </label>
          <input type="text" id="nheap-selected-resident" values="0 KB" readonly>
          <label>Filter: </label>
          <input type="text" id="nheap-filter">
        </div>
        <div id="nheap-table"></div>
      </div>

      <div id="tabs-storage">
        <div id="storage-toolbar" class="ui-widget-header ui-corner-all">
          <label>Group:</label>
          <button id="storage-profile">Profile</button>
          <ul id="storage-profile-menu"></ul>
          <label>Single snapshot:</label>
          <button id="storage-dump-mmaps">Show memory maps</button>
          <button id="storage-dump-nheap">Show native heap</button>
        </div>
        <div id="storage-table"></div>
      </div>

      <div id="tabs-settings">
        <div id="settings-container">
        </div>
        <button id="settings-store">Save settings</button>
      </div>
    </div>
  </div>

  <div id="status_bar">
    <div id="status_messages"></div>
    <div id="progress_bar"><div id="progress_bar-label">Progress...</div></div>
  </div>

  <div id="android_provision_dialog" title="Warning: this might brick your device">
    <p>
      <span class="ui-icon ui-icon-alert" style="float:left;"></span>
      Full heap profiling requires some modifications to the Android system
      (preload a library into the Android Zygote).
      <br>
      This feature has currently been tested on Nexus devices running Android K
      and L. On some other untested devices / Android releases this might end up
      bricking the device.
      <br>
      <b>Use this feature only on development rooted phones.</b>
      <br><br>
      If something goes wrong these are the steps to restore your device:
      <code>
        $ adb root && adb wait-for-device && adb remount
        $ adb shell mv /system/bin/app_process.real /system/bin/app_process
        $ adb reboot
      </code>
    </p>
  </div>

  <div id="js_loading_banner">
  Loading JavaScript content. If you see this message something has probably gone wrong. Check JS console.
  </div>

</body>
</html>
